<template>
    <canvas :width="width" :height="height" ref="canvasRef"></canvas>
    <br />
    移动某个纹理
</template>
  
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from "vue";
import * as GLMatrix from "gl-matrix";
import { loadImage } from "../../util/Util";
const width = ref(700);
const height = ref(700)
const canvasRef = ref<HTMLCanvasElement>()

const rotateValue = ref<GLMatrix.mat4>(GLMatrix.mat4.create());
GLMatrix.mat4.rotateZ(rotateValue.value, rotateValue.value, 0)

const glView = computed(() => {
    const mat4 = GLMatrix.mat4.create();
    GLMatrix.mat4.ortho(mat4, 0, width.value, height.value, 0, -1, 1)
    return mat4;
})

const veSource = computed(() => {
    return `
        attribute vec4 a_Position;
        attribute vec2 t_Position;
        uniform mat4 view;
        uniform vec2 offset;
        varying vec2 t_point;
        varying vec2 t_offset;
        void main(void){
            gl_Position =  view * a_Position ;
            gl_PointSize = 1.0;
            t_point = t_Position;
            t_offset = offset;
        }
    `
})

const faSource = computed(() => {
    return `
        precision mediump float;
        varying vec2 t_point;
        varying vec2 t_offset;
        uniform sampler2D u_Sampler1;
        uniform sampler2D u_Sampler2;

        void main(void){
            vec4 color1 = texture2D(u_Sampler1,t_point);
            vec4 color2 = texture2D(u_Sampler2,vec2(t_point.x + t_offset.x,t_point.y + t_offset.y));
            gl_FragColor = color1 + color2;
        }
    `
})

onMounted(async () => {
    const gl = canvasRef.value?.getContext('webgl');
    if (!gl) return;
    const veShader = gl.createShader(gl.VERTEX_SHADER);
    const faShader = gl.createShader(gl.FRAGMENT_SHADER);
    if (!veShader || !faShader) return;
    gl.shaderSource(veShader, veSource.value);
    gl.shaderSource(faShader, faSource.value);
    gl.compileShader(veShader);
    gl.compileShader(faShader);

    if (!gl.getShaderParameter(veShader, gl.COMPILE_STATUS)) {
        var err = gl.getShaderInfoLog(veShader);
        alert(err);
        return;
    }
    if (!gl.getShaderParameter(faShader, gl.COMPILE_STATUS)) {
        var err = gl.getShaderInfoLog(faShader);
        alert(err);
        return;
    }

    const program = gl.createProgram();
    if (!program) return;
    gl.attachShader(program, veShader);
    gl.attachShader(program, faShader);
    gl.linkProgram(program);
    gl.useProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        var info = gl.getProgramInfoLog(program);
        throw new Error('Could not compile WebGL program. \n\n' + info);
    }

    const view = gl.getUniformLocation(program, 'view');
    gl.uniformMatrix4fv(view, false, glView.value)



    // 
    const points = new Float32Array([
        100, 100, 0, 1,
        600, 100, 1, 1,
        600, 600, 1, 0,
        100, 600, 0, 0,
    ])

    const BYTE = points.BYTES_PER_ELEMENT;

    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    const a_Position = gl.getAttribLocation(program, 'a_Position');
    gl.enableVertexAttribArray(a_Position);
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, BYTE * 4, 0)

    const t_Position = gl.getAttribLocation(program, 't_Position')
    gl.enableVertexAttribArray(t_Position)
    gl.vertexAttribPointer(t_Position, 2, gl.FLOAT, false, BYTE * 4, BYTE * 2)

    const indexs = new Uint16Array([
        0, 1, 2, 3
    ])
    const indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexs, gl.STATIC_DRAW)


    gl.clearColor(0, 0, 0, 1)
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)




    let target = await loadImage(import('./images/basetexture.png'))
    gl.activeTexture(gl.TEXTURE0);
    const texture1 = gl.createTexture();
    if (!texture1) return;
    gl.bindTexture(gl.TEXTURE_2D, texture1)
    const u_Sampler1 = gl.getUniformLocation(program, 'u_Sampler1');
    gl.uniform1i(u_Sampler1, 0);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, target);






    target = await loadImage(import('./images/fog.png'))
    gl.activeTexture(gl.TEXTURE1);
    const texture2 = gl.createTexture();
    if (!texture2) return;
    gl.bindTexture(gl.TEXTURE_2D, texture2);
    const u_Sampler2 = gl.getUniformLocation(program, 'u_Sampler2');
    gl.uniform1i(u_Sampler2, 1);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    if (!target) return;
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, target);



    gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, 0)


    const offset = gl.getUniformLocation(program, 'offset');
    const offsetV = GLMatrix.vec2.create();
    const render = () => {
        // gl.activeTexture(gl.TEXTURE0);
        // gl.bindTexture(gl.TEXTURE_2D, texture1)
        // gl.uniform1i(u_Sampler1, 0);
        // gl.activeTexture(gl.TEXTURE1);
        // gl.bindTexture(gl.TEXTURE_2D, texture2)
        // gl.uniform1i(u_Sampler1, 1);
        GLMatrix.vec2.add(offsetV, offsetV, GLMatrix.vec2.fromValues(0.005, 0.0005))
        gl.uniform2fv(offset, offsetV)
        gl.clearColor(0, 0, 0, 1)
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, 0)
        requestAnimationFrame(render)
    }

    requestAnimationFrame(render)
})

onUnmounted(() => {

})

</script>
  
<style></style>
  